<script setup name="Operlog" lang="ts">
import { parseTime } from '../../../utils/ruoyi.ts'
import { list } from '@/api/monitor/operlog'
import type { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict('sys_oper_type', 'sys_common_status'))

const operlogList = ref<OperLogVO[]>([])
const loading = ref(true)

const total = ref(0)

const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' })

const operLogTableRef = ref()
const queryFormRef = ref()

const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
})

const data = reactive<PageData<OperLogForm, OperLogQuery>>({
  form: {
    operId: undefined,
    tenantId: undefined,
    title: '',
    businessType: 0,
    businessTypes: undefined,
    method: '',
    requestMethod: '',
    operatorType: 0,
    operName: '',
    deptName: '',
    operUrl: '',
    operIp: '',
    operLocation: '',
    operParam: '',
    jsonResult: '',
    status: 0,
    errorMsg: '',
    operTime: '',
    costTime: 0,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    operIp: '',
    title: '',
    operName: '',
    businessType: undefined,
    status: undefined,
    orderByColumn: defaultSort.value.prop,
    isAsc: defaultSort.value.order,
  },
  rules: {},
})

const { queryParams, form } = toRefs(data)

/** 查询登录日志 */
async function getList() {
  loading.value = true
  const res = await list(queryParams.value)
  operlogList.value = res.rows
  total.value = res.total
  loading.value = false
}
/** 操作日志类型字典翻译 */
function typeFormat(row: OperLogForm) {
  return proxy?.selectDictLabel(sys_oper_type.value, row.businessType)
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields()
  queryParams.value.pageNum = 1
}
/** 排序触发事件 */
function handleSortChange(column: any) {
  queryParams.value.orderByColumn = column.prop
  queryParams.value.isAsc = column.order
  getList()
}
/** 详细按钮操作 */
function handleView(row: OperLogVO) {
  dialog.visible = true
  form.value = row
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="p-2">
    <a-card class="mb-20px">
      <a-form ref="queryFormRef" :model="queryParams" layout="inline" class="inline-form" label-width="68px">
        <a-form-item label="操作地址" prop="operIp">
          <a-input v-model:value="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 140px;" @keyup.enter="handleQuery" />
        </a-form-item>
        <a-form-item label="系统模块" prop="title">
          <a-input v-model:value="queryParams.title" placeholder="请输入系统模块" clearable style="width: 140px;" @keyup.enter="handleQuery" />
        </a-form-item>
        <a-form-item label="操作人员" prop="operName">
          <a-input v-model:value="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 140px;" @keyup.enter="handleQuery" />
        </a-form-item>
        <a-form-item label="类型" prop="businessType">
          <a-select v-model:value="queryParams.businessType" placeholder="操作类型" clearable style="width: 140px">
            <a-select-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value">
              {{ dict.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态" prop="status">
          <a-select v-model:value="queryParams.status" placeholder="操作状态" clearable style="width: 240px">
            <a-select-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value">
              {{ dict.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">
              搜索
            </a-button>
            <a-button @click="resetQuery">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card shadow="hover">
      <a-table
        ref="operLogTableRef"
        :pagination="false"
        :data-source="operlogList"
        @sort-change="handleSortChange"
      >
        <a-table-column title="系统模块" align="center" data-index="title" :ellipsis="true" />
        <a-table-column title="操作类型" align="center" data-index="businessType">
          <template #default="{ record }">
            <bh-dict-tag :options="sys_oper_type" :value="record.businessType" />
          </template>
        </a-table-column>
        <a-table-column
          title="操作人员"
          align="center"
          width="110"
          data-index="operName"
          :show-overflow-tooltip="true"
          sortable="custom"
          :sort-orders="['descending', 'ascending']"
        />
        <a-table-column title="部门" align="center" data-index="deptName" width="130" :show-overflow-tooltip="true" />
        <a-table-column title="操作地址" align="center" data-index="operIp" width="130" :show-overflow-tooltip="true" />
        <a-table-column title="操作状态" align="center" data-index="status">
          <template #default="{ record }">
            <bh-dict-tag :options="sys_common_status" :value="record.status" />
          </template>
        </a-table-column>
        <a-table-column title="操作日期" align="center" data-index="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
          <template #default="{ record }">
            <span>{{ parseTime(record.operTime) }}</span>
          </template>
        </a-table-column>
        <a-table-column
          title="消耗时间"
          align="center"
          data-index="costTime"
          width="110"
          :show-overflow-tooltip="true"
          sortable="custom"
          :sort-orders="['descending', 'ascending']"
        >
          <template #default="{ record }">
            <span>{{ record.costTime }}毫秒</span>
          </template>
        </a-table-column>
        <a-table-column title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="{ record }">
            <a-tooltip content="详细" placement="top">
              <a-button v-hasPermi="['monitor:operlog:query']" type="link" @click="handleView(record)">
                查看
              </a-button>
            </a-tooltip>
          </template>
        </a-table-column>
      </a-table>
      <div class="text-right mt-5">
        <a-pagination
          v-show="total > 0"
          v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
          show-less-items @change="getList"
        />
      </div>
    </a-card>

    <!-- 操作日志详细 -->
    <a-modal v-model:open="dialog.visible" title="操作日志详细" width="700px" append-to-body>
      <a-form :model="form" label-width="100px">
        <a-row>
          <a-col :span="24">
            <a-form-item label="登录信息：">
              {{ form.operName }} / {{ form.deptName }} / {{ form.operIp }} / {{ form.operLocation }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="请求信息：">
              {{ form.requestMethod }} {{ form.operUrl }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="操作模块：">
              {{ form.title }} / {{ typeFormat(form) }}
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="操作方法：">
              {{ form.method }}
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="请求参数：">
              {{ form.operParam }}
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="返回参数：">
              {{ form.jsonResult }}
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="操作状态：">
              <div v-if="form.status === 0">
                正常
              </div>
              <div v-else-if="form.status === 1">
                失败
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="消耗时间：">
              {{ form.costTime }}毫秒
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="操作时间：">
              {{ parseTime(form.operTime) }}
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item v-if="form.status === 1" label="异常信息：">
              {{ form.errorMsg }}
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="dialog-footer">
          <a-button @click="dialog.visible = false">
            关 闭
          </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
